<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import { navigateTo } from '@tarojs/taro';
import { INDEX_TOTAL } from '/@/api/modules/workbench/workbench';
import { appEvents } from '/@/utils/events';
import IMG_ICON_MSG from '/@/assets/image/icon/msg.png';
import IMG_ICON_ORDER from '/@/assets/image/icon/order.png';
import IMG_ICON_ORDER_SUCCESS from '/@/assets/image/icon/order-success.png';
import IMG_ICON_DEVICE_MAINTAIN from '/@/assets/image/icon/device-maintain.png';
import IMG_ICON_ALARM from '/@/assets/image/icon/alarm.png';
import IMG_ICON_ORDER_UP from '/@/assets/image/icon/order-up.png';
import IMG_ICON_DEVICE_ACCOUNT_2 from '/@/assets/image/icon/device-account-2.png';
import IMG_ICON_KNOWLEDGE_2 from '/@/assets/image/icon/knowledge-2.png';

const state = reactive<WorkbenchApi.IndexTotalResp>({
  workOrderQuantity: 0,
  planTaskQuantity1: 0,
  planTaskQuantity2: 0,
  msgAlarmQuantity: 0,
  messageQuantity: 0,
});

/**
 * 获取首页统计
 */
function getIndexTotal() {
  INDEX_TOTAL({}).then((res) => {
    state.workOrderQuantity = res.workOrderQuantity;
    state.planTaskQuantity1 = res.planTaskQuantity1;
    state.planTaskQuantity2 = res.planTaskQuantity2;
    state.msgAlarmQuantity = res.msgAlarmQuantity;
    state.messageQuantity = res.messageQuantity;
  });
}

onMounted(() => {
  appEvents.on('alarmItemRead', () => {
    getIndexTotal();
  });

  appEvents.on('msgItemRead', () => {
    getIndexTotal();
  });

  getIndexTotal();
});
</script>

<template>
  <view class="home-logistics-utils">
    <view class="home-logistics-utils__title">我的工具</view>
    <nut-grid class="home-logistics-utils__wrapper" column-num="4" :border="false">
      <nut-grid-item text="我的消息" @click="navigateTo({ url: '/pages/msg/list/index' })">
        <nut-badge :value="state.messageQuantity" color="#ff3e3e">
          <nut-avatar shape="square" bg-color="transparent">
            <image :src="IMG_ICON_MSG" />
          </nut-avatar>
        </nut-badge>
      </nut-grid-item>
      <nut-grid-item text="我的工单" @click="navigateTo({ url: '/pages/work-order/list/index' })">
        <nut-badge :value="state.workOrderQuantity" color="#ff3e3e">
          <nut-avatar shape="square" bg-color="transparent">
            <image :src="IMG_ICON_ORDER" />
          </nut-avatar>
        </nut-badge>
      </nut-grid-item>
      <nut-grid-item text="巡检任务">
        <nut-badge :value="state.planTaskQuantity1" color="#ff3e3e">
          <nut-avatar
            shape="square"
            bg-color="transparent"
            @click="navigateTo({ url: '/pages/inspection/list/index' })"
          >
            <image :src="IMG_ICON_ORDER_SUCCESS" />
          </nut-avatar>
        </nut-badge>
      </nut-grid-item>
      <nut-grid-item text="保养任务">
        <nut-badge :value="state.planTaskQuantity2" color="#ff3e3e">
          <nut-avatar
            shape="square"
            bg-color="transparent"
            @click="navigateTo({ url: '/pages/maintenance/list/index' })"
          >
            <image :src="IMG_ICON_DEVICE_MAINTAIN" />
          </nut-avatar>
        </nut-badge>
      </nut-grid-item>
      <nut-grid-item text="全部告警" @click="navigateTo({ url: '/pages/alarm/list/index' })">
        <nut-badge :value="state.msgAlarmQuantity" color="#ff3e3e">
          <nut-avatar shape="square" bg-color="transparent">
            <image :src="IMG_ICON_ALARM" />
          </nut-avatar>
        </nut-badge>
      </nut-grid-item>
      <nut-grid-item text="故障上报" @click="navigateTo({ url: '/pages/work-order/edit/index' })">
        <nut-badge color="#ff3e3e">
          <nut-avatar shape="square" bg-color="transparent">
            <image :src="IMG_ICON_ORDER_UP" />
          </nut-avatar>
        </nut-badge>
      </nut-grid-item>
    </nut-grid>
    <view class="home-logistics-utils__title">其他功能</view>
    <nut-row :gutter="10">
      <nut-col :span="12">
        <image
          @click="navigateTo({ url: '/pages/device-account/list/index' })"
          :src="IMG_ICON_DEVICE_ACCOUNT_2"
        />
      </nut-col>
      <nut-col :span="12">
        <image
          @click="navigateTo({ url: '/pages/knowledge/type/index' })"
          :src="IMG_ICON_KNOWLEDGE_2"
        />
      </nut-col>
    </nut-row>
  </view>
</template>

<style lang="scss">
.home-logistics-utils {
  margin-bottom: 20px;

  &__title {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 10px;
  }
}
</style>
